<div class="panel panel-primary" *ngIf="product">
  <div class="panel-heading" style="font-size:large">
    {{pageTitle + ": " + product.productName}}
  </div>

  <div class="panel-body">
    <div class="row">
      <div class="col-md-6">
        <div class="row">
          <div class="col-md-3">Name:</div>
          <div class="col-md-6">{{product.productName}}</div>
        </div>
        <div class="row">
          <div class="col-md-3">Code:</div>
          <div class="col-md-6">{{product.productCode}}</div>
        </div>
        <div class="row">
          <div class="col-md-3">Description:</div>
          <div class="col-md-6">{{product.description}}</div>
        </div>
        <div class="row">
          <div class="col-md-3">Availability:</div>
          <div class="col-md-6">{{product.releaseDate}}</div>
        </div>
        <div class="row">
          <div class="col-md-3">Price:</div>
          <div class="col-md-6">{{product.price|currency:"USD":true}}</div>
        </div>
        <div class="row">
          <div class="col-md-3">5 Star Rating:</div>
          <div class="col-md-6">
            <app-star [rating]="product.starRating">
            </app-star>
          </div>
        </div>
        <div class="row">
          <div class="col-md-3">Category:</div>
          <div class="col-md-6">{{product.category}}</div>
        </div>
        <div class="row">
          <div class="col-md-3">Tags:</div>
          <div class="col-md-6">{{product.tags}}</div>
        </div>
      </div>

      <div class="col-md-6" *ngIf="product.imageUrl">
        <img class="center-block img-responsive" [style.width.px]="200" [style.margin.px]="2" [src]="product.imageUrl"
          [title]="product.productName">
      </div>
    </div>
    <div class="has-error" *ngIf="errorMessage">{{errorMessage}}</div>
  </div>

  <div class="panel-footer">
    <a class="btn btn-default"
      routerLink="/products"
      queryParamsHandling = "preserve">
      <!-- (click)="onBack()"  -->
      <i class="glyphicon glyphicon-chevron-left"></i> Back
    </a>
    <a class="btn btn-primary" style="width:80px;margin-left:10px"
      [routerLink]="['/products', product.id, 'edit']"
    >
      Edit
    </a>
  </div>
</div>
